<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/shop.css">
</head>

<body>
    <table class="shop">
        <tbody class="shopS" id="goodss">
            <tr class="nav">
                <th class="Son1">Your Item(s)</th>
                <th class="Son2">Quantity</th>
                <th class="Son3">Price</th>
                <th class="Son4">Total Price</th>
                <th class="Son5">Remove</th>
            </tr>
        </tbody>
        <tfoot>
            <tr class="countall">
                <td>
                    <span>
                        <i class="iconL"></i>
                        Continue Shopping
                    </span>
                </td>
                <td class="countRight">
                    <span class="cartall">
                        Cart Total
                        <b id="zong">0</b>
                    </span>
                    <span class="savetall" id="zo">
                        Your?Total?Saving:579.47?py6.
                    </span>
                    <button>
                        PROCEED TO CHECKOUT
                        <i class="iconR"></i>
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>

</body>

</html>
<script src="../js/model.js"></script>
<script>
    
    function fn() {
        lists.forEach(function (item, index) {
            goodss.innerHTML += `
        <tr class="shopList">
                <td class="imgTd"><img class="shops" src="../images/${item.img}" alt="" srcset=""></td>
                <td class="titleTd">
                    <h6>${item.title}</h6>
                    <span>ID:#${item.id}</span>
                    <span>Size:${item.size}</span>
                </td>
                <td class="Son2">
                    <span class="reduce">-</span>
                    <input type="text" id="txt" value="0" class="count" >
                    <span class="add">+</span>
                </td>
                <td class="Son3">
                    <del class="oriPrice">${item.oriPrice} py6</del>
                    <b class="nowPrice" >${item.nowPrice} py6</b>
                </td>
                <td class="Son4">
                    <span class="priceAll">0</span>
                    <span class="saveAll">You save save py6</span>
                </td>
                <td class="Son5">
                    <img class="del" src="../images/del.png" alt="">
                </td>
            </tr>
        `
        })
    }
    fn()
    var jian = document.querySelectorAll('.reduce')
    var num = document.querySelectorAll('.count')
    var jia = document.querySelectorAll('.add')
    var imgss = document.querySelectorAll('.del')
    var zongs = document.getElementById('zong')
    var ii = document.querySelector('i')
    var save =document.querySelectorAll('.saveAll')
    for (var i = 0; i < jian.length; i++) {
        jian[i].onclick = function () {
            if (this.nextElementSibling.value > 0) {
                this.nextElementSibling.value = parseInt((this.nextElementSibling.value) * 1 - 1 / 2)
                var jj = this.parentElement.nextElementSibling.firstElementChild.innerHTML
                var oo = jj.substr(0, 7)
                var two = this.parentElement.nextElementSibling.lastElementChild.innerHTML
                var twos = two.substr(0, 7)
                var cha=parseInt(oo-twos)*this.nextElementSibling.value * 1
                this.parentElement.nextElementSibling.nextElementSibling.firstElementChild.innerHTML = (parseFloat((this.nextElementSibling.value * 1 * twos).toFixed(0))) * 1
                this.parentElement.nextElementSibling.nextElementSibling.lastElementChild.innerHTML=cha
            }
        }
        jia[i].onclick = function () {
            this.previousElementSibling.value = parseInt((this.previousElementSibling.value) * 1 + 1)
            var jj = this.parentElement.nextElementSibling.firstElementChild.innerHTML
            var oo = jj.substr(0, 7)
            var two = this.parentElement.nextElementSibling.lastElementChild.innerHTML
            var twos = two.substr(0, 7)
            var cha=parseInt(oo-twos)*this.previousElementSibling.value * 1
            this.parentElement.nextElementSibling.nextElementSibling.firstElementChild.innerHTML = (parseFloat((this.previousElementSibling.value * 1 * twos).toFixed(0))) * 1
            this.parentElement.nextElementSibling.nextElementSibling.lastElementChild.innerHTML=cha
        }

    }
    zongs.onclick = function () {
        var pee = document.querySelectorAll('.priceAll')
        for (var i = 0; i < pee.length; i++) {
            console.log(pee[i].innerHTML);
            
            var res8 = (pee[i].innerHTML) * 1
            console.log(res8);
            
            zongs.innerHTML = zongs.innerHTML * 1 + res8
        }
    }
    for(var i=0;i<save.length;i++){
        var str =save[i].innerHTML
        var str1=str.substr(0,save[i].innerHTML.length-3)
        var str2=str1.substr(9)
        save[i].innerHTML=str2
        console.log(str2);
    }
    for (var i = 0; i < imgss.length; i++) {
        imgss[i].onclick = function () {
            if (confirm("你确定要删除吗？")) {
                this.parentNode.parentNode.remove()
            }
        }

    }
</script>